<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { basicProps } from './props';

  defineProps({
    ...basicProps,
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  onMounted(async () => {
    // let Data = await getEchartAPI('data');
    let dates = [
      '2025-6-6 10:05:01',
      '2025-6-6 10:05:02',
      '2025-6-6 10:05:04',
      '2025-6-6 10:05:05',
      '2025-6-6 10:05:06',
    ];
    let values = [0,1,1,0,1];
    // if (Array.isArray(Data.data.speeds)) {
    //   // 获取最后 15 条数据
    //   let last15Data = Data.data.speeds.slice(-50);
    //
    //   // 提取 date 和 value 组成两个数组
    //   dates = last15Data.map((item) => item.date);
    //   values = last15Data.map((item) => item.value);
    //
    // }

    setOptions({
      grid: {
        top: 20, // 设置顶部距离
        bottom: 20, // 设置底部距离
        left: 100, // 设置底部距离
        right: 100, // 设置底部距离
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dates,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: values,
          type: 'line',
        },
      ],
      tooltip: {
        trigger: 'item', // 触发类型为 'item' 表示针对数据项触发
        formatter: function (params) {
          return `时间: ${params.name}<br/>采集速率: ${params.value}`;
        },
      },
    });
  });
</script>
